<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en" xmlns="">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<body>
<style>
    .btn-gray{
        background-color: dimgray;
        color: #f0f8ff;
    }
</style>
<div id="tab">
    <nav class="navbar navbar-default" style="height: 100%;margin: 0px">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <a class="navbar-brand">学生选课管理</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="/toCourse">课程管理</a></li>
                    <li><a href="/login">学生管理</a></li>
                    <li><a href="/toChoice">选课管理</a></li>
                    <li><a href="/toDetail">选课明细表</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <div style="width: 1300px;margin: 0 auto;">
    <div class="panel-heading">
        <div class="col-sm-2">
            <div class="input-group">
                <input type="text" placeholder="输入学生学号" class="form-control" id="sid"/>
                <span class="input-group-addon"><a @click="queryStudent()"><i class="glyphicon glyphicon-search"></i></a></span>
            </div>
            <br>
        </div>
    </div>
    <div style="height: 200px">
        <!-- Table -->
        <table class="table">
            <tr>
                <td>{{Student.id}}</td>
                <td>{{Student.name}}</td>
                <td>{{Student.major}}</td>
                <td>{{Student.entertime}}</td>
                <td>{{Student.remark}}</td>
            </tr>
        </table>
    </div>
    <div class="panel-heading">
        <div class="col-sm-2" id="so">
            <div class="input-group">
                <select id="selectVal" class="form-control">
                    <option :value="sel.id" v-for="sel in ShowIndexList">{{sel.name}}</option>
                </select>
                <span class="input-group-addon"><a @click="SavaJoin()"><i class="glyphicon glyphicon-plus"></i></a></span>
            </div>
            <br>
        </div>
    </div>
    <div style="height: 800px">
        <!-- Table -->
        <table class="table">
            <tr v-for="list in StudentJoin">
                <td>{{list.cid}}</td>
                <td>{{list.name}}</td>
                <td>{{list.credit}}</td>
                <td>{{list.period}}</td>
                <td>{{list.remark}}</td>
                <td>
                    <button type="button" class="btn btn-gray glyphicon glyphicon-remove-sign" @click="OnDeleteJoin(list.cid)"> 删除</button>
                </td>
            </tr>
            <tr v-for="list in VirtualCourse">
                <td>{{list.cid}}</td>
                <td>{{list.name}}</td>
                <td>{{list.credit}}</td>
                <td>{{list.period}}</td>
                <td>{{list.remark}}</td>
                <td>
                    <button type="button" class="btn btn-gray glyphicon glyphicon-remove-sign" @click="OnDeleteJoin(list.cid)"> 删除</button>
                </td>
            </tr>
        </table>
    </div>
    <!-- 底部 -->
    <div class="navbar navbar-default navbar-fixed-bottom" style="height: 50px">
        <div style="float: right;margin-top: 5px;margin-right: 5px">
            <div style="text-align: right">
                <button type="button" class="btn btn-gray glyphicon glyphicon-plus-sign" @click="SavaStudentJoinCourse()"> 保存</button>
                <button type="button" class="btn btn-gray glyphicon glyphicon-minus-sign" @click="Cancel()" id="dlt"> 取消</button>
            </div>
        </div>
    </div>
    </div>
    <!-- 确认删除模态框 -->
    <div class="modal fade" id="DeleteModel">
        <div class="modal-dialog" style="width: 300px;height: 200px">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" style="font-weight: bold">删除确认</h4>
                </div>
                <div class="modal-body">
                    <p>确认删除该信息吗?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" @click="DeleteJoin()">确认</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</div>
</body>
<script>
    /*import Vue from "vue";
    import axios from "axios";
    Vue.prototype.$axios = axios;*/
    let app = new Vue({
        el:"#tab",
        data:{
            ShowIndexList:[],//下拉列表数据
            Student:"",//学生数据
            StudentJoin:[],//学生对应的所有课程
            VirtualCourse:[],//虚拟的课程
            JoinId:"",//删除所需id
        },
        methods:{

            //回调函数调用的方法，从后台获取数据，渲染页面
            ShowIndex: function () {
                axios.post('http://localhost:3002/show').then(response => {
                    this.ShowIndexList = response.data.list;
                })
            },
            //根据id查学生信息
            queryStudent: function (){
                let sid = $("#sid").val();
                if (sid != ""){
                    axios.post('http://localhost:3002/query',{
                        data:{
                            sid
                        }
                    }).then(response=>{
                        this.Student = response.data.retObj;
                        this.StudentJoin = response.data.retJoin
                    })
                }
            },
            //添加课程信息，目前的数据并未进入数据库
            SavaJoin: function () {
                if (this.Student == ""){
                    alert("请先选择学生");
                    return;
                }
                axios.post('http://localhost:3002/findById',{
                    data:{
                        cid:$("#selectVal").val()
                    }
                }).then(response=>{
                    //判断课程是否存在
                    let b = true;
                    for (s in this.StudentJoin){
                        if (this.StudentJoin[s].cid == response.data.retObj.cid){
                            b = false;
                        }
                    }
                    for (v in this.VirtualCourse){
                        if (this.VirtualCourse[v].cid == response.data.retObj.cid){
                            b = false;
                        }
                    }
                    //如果存在则不添加
                    if (b == true){
                        this.VirtualCourse.push(response.data.retObj)
                    }else{
                        alert("所选课程已添加");
                    }
                })
            },
            //删除：把id放入data中
            OnDeleteJoin: function (id) {
                //先把对象里之前所选择过的id清空
                this.JoinId = "";
                this.JoinId = id;
                $("#DeleteModel").modal('show')
            },
            //确认删除，根据id去数据库中删，如果该数据是虚拟数据（后添加的）则从虚拟数组中把该数据删除
            DeleteJoin: function (){
                let b = true;
                for (v in this.VirtualCourse){
                    if (this.VirtualCourse[v].cid == this.JoinId){
                        this.VirtualCourse.splice(v,1);
                        b = false;
                    }
                }
                if (b == true){
                    axios.post('http://localhost:3002/delete',{
                        data:{
                            cid:this.JoinId,
                            sid:this.Student.id
                        }
                    }).then(response=>{
                        //删除后刷新页面数据
                        this.StudentJoin = response.data.retJoin
                    })
                }
                $("#DeleteModel").modal("hide");
            },
            //保存：把添加的数据存入数据库
            SavaStudentJoinCourse: function () {
                //遍历该集合，拿到集合中每一个对象的id保存起来，传到后台，以供做中间表添加操作
                let listCid = [];
                for (v in this.VirtualCourse){
                    listCid.push(this.VirtualCourse[v])
                }
                axios.post('http://localhost:3002/save',{
                    data:{
                        sid:this.Student.id,
                        listCid
                    }
                    //this.StudentJoin = response.data.retJoin
                }).then(response=>{
                    //添加后刷新页面数据，VirtualCourse虚拟课程集合应该为空
                    this.queryStudent();
                    this.VirtualCourse = []
                })
            },
            //取消
            Cancel:function (){
                this.VirtualCourse = [];
            }
        },
        //钩子函数
        created() {
            this.ShowIndex();
        }
    })
</script>
</html>
</body>
</html>